<template>
  <div class="introduction">
    <div class="play">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#iconbofang1" />
      </svg>
      <span>观看试看视频</span>
    </div>
    <div class="crousr-introduction">
      <h1>全面系统地讲解能量守恒</h1>
      <p @click="showAll">
        全面系统地讲解能量守恒
        深入理解能量守恒，让同学不仅仅只会用公式、更能理解能量守恒，再难的问题也不怕啦！
      </p>
    </div>
    <div class="teacher-info">
      <el-avatar :size="150" src="//img.mukewang.com/user/54584e2c00010a2c02200220-100-100.jpg"></el-avatar>
      <span class="name">隔壁老王</span>
      <span class="job">高级物理教师</span>
    </div>
  </div>
</template>

<script>
import { Avatar } from "element-ui";
export default {
  components: {
    ElAvatar: Avatar
  },
  props: ["course_id"],
  methods: {
    showAll(e){
      if(this.global.SCREEN_WIDTH < 576){
        e.target.classList.add('showall')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .introduction {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .play {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 30%;
      color: rgba(0, 0, 0, 0.75);
      height: 100%;
      .icon {
        width: 70px;
        height: 70px;
        cursor: pointer;
        transition: all 0.2s;
        &:hover {
          transform: scale(1.1);
        }
      }
      span {
        font-size: 17px;
        line-height: 22px;
        margin-top: 20px;
      }
    }
    .crousr-introduction {
      width: 40%;
      height: 100%;
      color: rgba(0, 0, 0, 0.75);

      h1 {
        font-weight: 700;
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 16px;
      }
      p {
        font-size: 14px;
        line-height: 28px;
      }
    }
    .teacher-info {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.75);

      .name {
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        margin: 6px 0;
      }
      .job {
        line-height: 22px;
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .introduction {
    margin: 10px auto 5px auto !important;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    .play {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      color: rgba(0, 0, 0, 0.75);
      height: 100%;
      .icon {
        width: 50px;
        height: 50px;
      }
      span {
        font-size: 14px;
        line-height: 10px;
        margin-top: 10px;
      }
    }
    .crousr-introduction {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      color: rgba(0, 0, 0, 0.75);
      h1 {
        text-align: center;
        font-weight: 700;
        font-size: 18px;
        line-height: 36px;
        margin-bottom: 16px;
      }
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-wrap: break-word;
        word-break: break-all;
        text-align: left;
        font-size: 14px;
        line-height: 28px;
        &.showall {
          display: block;
        }
      }
    }
    .teacher-info {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.75);
      .el-avatar {
        width: 100px !important;
        height: 100px !important;
      }
      .name {
        font-weight: 700;
        font-size: 16px;
        line-height: 16px;
        margin: 6px 0;
      }
      .job {
        font-size: 14px;
        line-height: 16px;
      }
    }
  }
}
</style>
